<template>
  <div class="index">
    <div class="index_main">
      <div class="index_logo"><img :src="img1"></div>
      <div class="index_tip"><p>应用场景：会议室改造/内部培训/跨区域远程会议/对外展示</p></div>
      <div class="index_mianimg">
        <img :src="img6" class="img">
        <div class="zi1"><a href="#"><router-link to="material/list"><img :src="img2" title="素材管理"></router-link></a></div>
        <div class="zi2"><a href="#"><img :src="img3" title="设备管理"></a></div>
        <div class="zi3"><a href="#"><router-link to="application/list"><img :src="img4" title="应用管理"></router-link></a></div>
        <div class="zi4"><a href="#"><router-link to="programme/list"><img :src="img5" title="节目单管理"></router-link></a></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        img1: require('@/assets/wxlogo.png'),
        img2: require('@/assets/scgl.png'),
        img3: require('@/assets/sbgl.png'),
        img4: require('@/assets/yygl.png'),
        img5: require('@/assets/jmd.png'),
        img6: require('@/assets/indeximg.jpg')
      }
    }
  }
</script>

<style scoped>
  .index {
    background-color: #000;
    height: 100vh;
  }

  .index_logo {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .index_logo img {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding-top: 20px;
  }

  .index_tip {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }

  .index_tip p {
    color: #00f1fa;
    width: 215px;
    text-align: center;
    line-height: 2;
    font-size: 14px;
  }

  .index_mianimg {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 112px auto 0 auto;
    position: relative;
  }

  .index_mianimg .img {
    width: 100%;
    height: 100%;
  }

  .zi1 {
    position: absolute;
    top: -15%;
    left: 16%;
  }

  .zi2 {
    position: absolute;
    top: 1%;
    right: 4%;
    transform: rotate(6deg);
  }

  .zi3 {
    position: absolute;
    bottom: 3%;
    right: 16%;
  }

  .zi4 {
    position: absolute;
    bottom: 11%;
    left: 0;
  }

  .zi1 img,
  .zi2 img,
  .zi3 img,
  .zi4 img {
    width: 100%;
    height: 100%;
  }

  .zi1,
  .zi2,
  .zi3 {
    width: 23vw;
    height: 17vw;
  }

  .zi4 {
    width: 22vw;
    height: 22vw;
  }
</style>
